<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>客户管理</span>
    </div>
    <div class="home-container">

      <v-searchForm
        :form-data="filter_info"
        :form-title="formTitle"
        @search="search"
        @reset="reset"
      />
      <v-tableBtns
        :table-title="exportTitle"
        :table-data="exportData"
      />

      <v-table
        :table-title="tableTitle"
        :table-data="tableData"
        :editable="false"
        :deletable="false"
        :readable="true"
        @sortChange="sortChange"
        @read="read"
      />
      <v-pagination
        :page-info="pageInfo"
        :get-table-list="getTableList"
      />
    </div>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import UploadExcelComponent from '@/components/UploadExcel/index.vue'

export default {
  name: 'Home',
  components: { UploadExcelComponent },
  data() {
    return {
      formTitle: [
        {
          cn: '客户名称：',
          en: 'client'
        },
        {
          cn: '联系人：',
          en: 'name'
        },
        {
          cn: '联系电话：',
          en: 'phone'
        }
      ],
      filter_info: {},
      tableTitle: [
        {
          cn: '名称',
          en: '关联客户',
        },
        {
          cn: '联系人',
          en: '姓名'
        },
        {
          cn: '联系电话',
          en: '联系电话'
        },
      ],
      tableData: [],
      exportTitle:[],
      exportData:[],
      // 排序
      sidx: '',
      sortKey: null,
      // f分页
      pageInfo: {
        pageNumber: 1,
        pageSize: 30,
        totalPage: 0,
        totalRow: 0
      }

    }
  },
  activated() {
    this.getTableList()
  },
  methods: {
    getTableList(data) {
      const loading = this.$loading()

      const datas = {
        sidx: this.sidx,
        sortKey: this.sortKey,
        ...this.filter_infos,
        page: this.pageInfo.pageNumber, rows: this.pageInfo.pageSize
      }
      this.$get('action/Contacts/dataGrid', datas)
        .then(res => {
          let list
          if (res.data.list && res.data.list.length) {
            list = res.data.list.map((item, index) => {
              item.创建时间 = this.$parseTime(item.创建时间)
              item.联系电话 = item.联系电话 ? JSON.parse(item.联系电话)[0].telNum : ''
              return item
            })
          }
          this.pageInfo.totalPage = res.data.totalPage
          this.pageInfo.totalRow = res.data.totalRow

          this.tableData = list || []
            loading.close()
        })
        .catch(err=>{
          setTimeout(()=>loading.close(),2000)
          this.$message({
            message: '获取数据失败',
            type: 'error'
          })
        })
    },
    // 搜索
    search() {
      this.pageInfo.pageNumber=1
      this.getTableList()
    },

    reset() {
      this.filter_info = {}
      this.getTableList()
    },

    read(val) {
      const data = val.row
      this.$router.push({
        name: 'contacts.check_contacts',
        params: { details: data }
      })
    },
    del(val) {
      console.log(val)
    },

    // 排序
    sortChange({ column, prop, order }) {
      console.log(column, prop, order)
      this.sidx = prop || ''
      this.sortKey = order === 'ascending' ? 'asc' : null
      this.getTableList()
    }

  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ]),
    filter_infos() {
      const data = {}
      const origin = this.filter_info
      for (const key in origin) {
        if (!this.filter_info[key] && this.filter_info[key] !== 0) {
          this.$delete(this.filter_info, key)
          continue
        }
        if (key === 'created_at') {
          data.start_time = origin[key][0]
          data.End_time = origin[key][1]
        } else {
          data[key] = origin[key]
        }
      }
      if (!origin.created_at) {
        delete data.start_time
        delete data.End_time
      }
      return data
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
    .home-container {
        .top-nav {
            padding-bottom: 15px;
        }

        .top-form {
            margin-bottom: 15px;

            .line {
                text-align: center;
            }
        }

        .grid-content {
            /*font-size: 20px;*/
            cursor: pointer;
            color: #45d1e1;

            .color {
                /*font-size: 20px;*/
                color: #45d1e1;
                font-weight: 600;
            }
        }

        .table-menu {
            padding-bottom: 15px;
        }
    }

</style>
